<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>排队任务队列案例</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-container style="padding: 20px;">
        <el-main>
            <div style="margin-bottom: 20px;">
                <el-button type="primary" @click="addTask">添加任务</el-button>
                <el-button type="danger" @click="clearTasks">清空任务</el-button>
            </div>

            <el-table :data="tasks" border style="width: 100%">
                <el-table-column prop="taskId" label="任务ID" width="180"></el-table-column>
                <el-table-column prop="taskName" label="任务名称" width="180"></el-table-column>
                <el-table-column prop="addTime" label="添加时间" width="180">
                    <template slot-scope="scope">
                        {{ formatTime(scope.row.addTime) }}
                    </template>
                </el-table-column>
                <el-table-column prop="taskAwaitCount" label="等待任务数"></el-table-column>
                <el-table-column prop="startTime" label="开始时间">
                    <template slot-scope="scope">
                        {{ formatTime(scope.row.startTime) }}
                    </template>
                </el-table-column>
                <el-table-column prop="endTime" label="结束时间">
                    <template slot-scope="scope">
                        {{ formatTime(scope.row.endTime) }}
                    </template>
                </el-table-column>
                <el-table-column prop="taskRealDuration" label="任务执行耗时"></el-table-column>
                <el-table-column prop="taskAwaitDuration" label="排队等待耗时"></el-table-column>
                <el-table-column prop="predictionDuration" label="任务总耗时"></el-table-column>
                <el-table-column label="状态" width="120">
                    <template slot-scope="scope">
                        <el-tag :type="statusType(scope.row.taskStatus)" size="small">
                            {{ scope.row.taskStatus }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="failedInfo" label="失败信息"></el-table-column>
            </el-table>
        </el-main>
    </el-container>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
    // 配置axios基本地址
    axios.defaults.baseURL = 'http://localhost:8081';

    new Vue({
        el: '#app',
        data() {
            return {
                tasks: [],
                refreshTimer: null
            }
        },
        mounted() {
            this.loadTasks()
            this.refreshTimer = setInterval(this.loadTasks, 3000)
        },
        methods: {
            // 时间格式化方法（yyyy-MM-dd HH:mm:ss）
            formatTime(time) {
                if (!time) return '-'; // 处理 null/undefined

                let date;
                if (time instanceof Date) { // 如果已经是 Date 对象
                    date = time;
                } else if (typeof time === 'string') { // 如果是 ISO 字符串（如 "2025-04-10T03:31:40.488Z"）
                    date = new Date(time);
                } else if (typeof time === 'number') { // 如果是时间戳
                    date = new Date(time);
                } else {
                    return '-'; // 其他情况返回默认值
                }

                // 检查是否有效
                if (isNaN(date.getTime())) return '-';

                // 格式化为 yyyy-MM-dd HH:mm:ss
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const day = String(date.getDate()).padStart(2, '0');
                const hours = String(date.getHours()).padStart(2, '0');
                const minutes = String(date.getMinutes()).padStart(2, '0');
                const seconds = String(date.getSeconds()).padStart(2, '0');

                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            },

            // 状态标签类型
            statusType(status) {
                const types = {
                    '等待中': 'info',
                    '执行中': 'primary',
                    '执行成功': 'success',
                    '执行失败': 'danger',
                    '执行超时': 'warning'
                }
                return types[status] || ''
            },

            // 加载任务列表
            async loadTasks() {
                try {
                    // 实际应替换为 GET /tasks
                    const res = await axios.get('/task/query')
                    console.log('res:', res)
                    this.tasks = res.data.data
                } catch (error) {
                    console.error('获取任务失败:', error)
                }
            },

            // 添加任务
            async addTask() {
                try {
                    // 实际应替换为 GET /add
                    await axios.get('/task/add', {
                        name: `任务${this.tasks.length + 1}`
                    })
                    this.loadTasks()
                } catch (error) {
                    console.error('添加任务失败:', error)
                }
            },

            // 清空任务
            async clearTasks() {
                try {
                    // 实际应替换为 GET /clear
                    await axios.get('/task/clear')
                    this.loadTasks()
                } catch (error) {
                    console.error('清空任务失败:', error)
                }
            }
        },
        beforeDestroy() {
            clearInterval(this.refreshTimer)
        }
    })
</script>
</body>
</html>
